import React,{PropTypes, Component } from 'react';

import { Menu, Icon } from 'antd';

import API,{GET_MENU,LOGOUT,GET_USER_INFO} from 'lib/api';
import {redirect,inRoute} from 'lib/utils';
const SubMenu = Menu.SubMenu;
import NProgress from 'nprogress';


export class LeftMenu extends Component {


    constructor(props){
        super(props);

    }

    state = {
        menus:[],
    }

    componentDidMount() {

        if(!inRoute()){

            API.fetch(GET_MENU,{},resp =>{

                this.renderMenu(resp);
                global.privs = resp;

                this.setState({
                    menus:resp
                })
            })

        }

    }


    handleOpenChange(openKeys){
        this.setState({
            openKeys:openKeys
        })

    }

    renderMenu(resp){

        let path = window.location.pathname;


        NProgress.start();

        path = path.split('/');

        path = (path[1] || 'home') +'@'+ (path[2] || 'index');

        let selectedKeys,openKeys;


        resp.map((v,k) => {
            if(v.children){
                v.children.map((child,key) => {
                    if(child.key == path){
                        openKeys = resp[k].key;
                        selectedKeys = child.activeid;
                    }
                })
            }else{
                if(v.key == path){
                    openKeys = v.key;
                    selectedKeys = v.activeid;
                }
            }
        })


        this.setState({
            selectedKeys:[selectedKeys],
            openKeys:[openKeys],
        })

        NProgress.done();
    }



    handleMenuClick(item){


        const {url} = item.item.props;


        const {menus} = this.state;

        redirect(url);

        this.renderMenu(menus);

    }



    render(){

        let {menus,selectedKeys,openKeys} = this.state;

        return (
            <Menu theme="dark" onClick={this.handleMenuClick.bind(this)}
                  onOpenChange={this.handleOpenChange.bind(this)}
                  selectedKeys={selectedKeys}
                  openKeys={openKeys}
                  mode="inline"
            >


                {
                    menus.map((v,k) => {
                        if(v.children){
                            return (
                                <SubMenu
                                    key={v.key}
                                    title={<span><Icon type={menus[k].icon} /><span>{v.title}</span></span>}
                                >
                                    {
                                        v.children.map( (child,key) => {

                                            if(child.show){
                                                return (
                                                    <Menu.Item  url={child.url} key={child.key}>{child.title}</Menu.Item>
                                                )
                                            }

                                        })
                                    }

                                </SubMenu>
                            )
                        }else{
                            return (
                                <Menu.Item  url={v.url} key={v.key}>
                                    <Icon type={v.icon} />
                                    <span>{v.title}</span>
                                </Menu.Item>
                            )
                        }
                    })
                }
            </Menu>

        )
    }
}

export class HeadMenu extends Component{


    componentDidMount(){
        if(!inRoute()){
            API.fetch(GET_USER_INFO,{},resp=>{
                this.setState({
                    info:resp
                })
            })
        }

    }

    state = {
        info:{}
    }

    userMenuClick(item){
        const {key} = item;
        switch(key){
            case 'logout':
                API.fetch(LOGOUT,{},resp=>{
                    window.location.href = '/login';
                })
                break;
            case 'editpass':

                break;
        }
    }

    render(){
        return (
            <Menu onClick={this.userMenuClick.bind(this)} mode="horizontal" style={{zIndex:1000,lineHeight:"64px",border:'none',display:"flex",padding:"0 15px"}} >
                <SubMenu
                    title={<span><Icon type="user" />{this.state.info.name}</span>}
                >
                    <Menu.Item key="editpass">
                        修改密码
                    </Menu.Item>
                    <Menu.Item key="logout">
                        退出登录
                    </Menu.Item>
                </SubMenu>
            </Menu>
        )
    }
}




